<template>
  <div class="submit-box">
    <div class="allAddress">
      <div class="setaddress">
        <div class="change" style="display: flex; padding: 10px">
          <div style="flex: 1">快递配送</div>
          <div style="flex: 1">到店自提</div>
        </div>
        <div class="first-box" style="padding: 10px">
          <div class="first-top" style="display: flex; margin-top: 10px">
            <div class="user-name">645</div>
            <div class="user-phone" style="margin-left: 20px">31132132</div>
          </div>
          <div class="first-bottom" style="display: flex; margin-top: 10px">
            <div class="address">天津市天津市天津市天津市天津市天津市</div>
            <div style="margin-left: auto">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="line">
            <img
              src="http://47.115.51.185/h5/img/line.05bf1c84.jpg"
              style="width: 100%"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="shopping-box">
      <div class="shopping-Num">共{{ seletedProducts.length }}件商品</div>
    </div>
    <div class="shopp-card" v-for="(item) in seletedProducts" :key="item.id">
      <van-card
        :num="item.cart_num"
        :desc="`属性${item.productInfo.attrInfo.suk}`"
        :price="item.productInfo.price"
        :title="item.productInfo.store_name"
        :thumb="item.productInfo.image"
      />
      <van-submit-bar
        text-align="left" 
        :price="carallnum*100"
        button-text="立即结算"
        @submit="onSubmit"
      />
    </div>

    <div class="shopList" style="padding: 10px;background:#fff;">
      <div
        style="
          display: flex;
          border-bottom: 1px solid #e8e8e8;
          margin: 10px 0px;
          padding-bottom: 10px;
        "
      >
        <!-- 优惠券单元格 -->
        <van-coupon-cell />
        <!-- 优惠券列表 -->
        <van-popup position="bottom" style="height: 90%; padding-top: 4px">
          <van-coupon-list />
        </van-popup>
      </div>

      <div
        style="
          display: flex;
          border-bottom: 1px solid #e8e8e8;
          margin: 10px 0px;
          padding-bottom: 10px;
        "
      >
        <div>快递费用</div>
        <div style="color: #999; margin-left: auto">免运费</div>
      </div>
      <div
        style="
          border-bottom: 1px solid #e8e8e8;
          margin: 10px 0px;
          padding-bottom: 10px;
        "
      >
        <div>备注信息</div>
        <div>
          <input class="inputbei" type="text" placeholder="请填写留言" />
        </div>
      </div>
    </div>

<div class="zhifufangshi">
      <span>支付方式</span>
      <div class="zhifu2">
        <div ref="doll" class="active" @click="addact">
          <span>余额支付</span>
          <span>可用余额:{{userInfo.now_money}} </span>
        </div>
        <div ref="wechat" @click="addact2">
          <span>微信支付</span>
          <span>微信快捷支付</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapActions , mapGetters} from "vuex";
import { Toast } from "vant";

export default {
  props: ["id"],
  data() {
    return {
      // 所有地址
      allAddress: [],

      total: 0,
      price: 0,
      chosenAddressId: "1",

      data: {
        id: [],
        name: [],
        tel: [],
        address: [],
      },

      seletedProducts: [],
      cartnum: 0,
      carallnum: 0,

      // 提交支付订单
      arr3: [],
      addcar: null,
      jsd:null

      
    };
  },
  created() {
    this.getAddress();
    this.getGoods();
    // 选中的商品
    this.seletedProducts = JSON.parse(localStorage.seletedProducts);
    // console.log(JSON.parse(localStorage.seletedProducts));
    console.log(this.seletedProducts);
// 计算商品的总价格
 for (let i in this.seletedProducts) {
      this.cartnum += this.seletedProducts[i].cart_num;
      this.carallnum +=
        this.seletedProducts[i].productInfo.price * this.seletedProducts[i].cart_num;
      console.log(this.seletedProducts[i].id);
    }

    console.log(this.carallnum);



    //所有收获地址
    this.allAddress = JSON.parse(localStorage.Alladdress);
    // console.log(this.allAddress);

    this.allAddress.forEach((item) => {
      // console.log(item);
      this.data.id.push(item.id);
      this.data.name.push(item.real_name);
      this.data.tel.push(item.phone);
      this.data.address.push(
        item.province + item.city + item.district + item.detail
      );
      // id:item.id,
      // name:item.real_name,
      // tel:item.phone,
      // address:item.province+item.city+item.district+item.detail
    });
    // console.log(this.data.id);
    // for(var key in this.data){
    //     console.log([key]);
    // }
  },
  methods: {
    ...mapActions(["getAddress","getGoods"]),
    onSubmit() {
      console.log(this.seletedProducts);
      if(this.seletedProducts.length==0){
          Toast("请选择商品");
        return;
      }
      let ar=[];
      for(let i in this.seletedProducts){
        ar.push(this.seletedProducts[i].id);
      }
      console.log(ar);
      this.axios.post("http://47.115.51.185/api/cart/del?ids=" + ar).then(d=>{
        console.log(d);
      })
      for(let j in this.seletedProducts){
        this.arr3.push(this.seletedProducts[j].id)
      }
      let arr4= this.arr3.join(",");
      console.log(arr4);

      this.axios.post("/api/order/confirm",{
        cartId:arr4,
      }).then(d=>{
        console.log(d);
        if(d.data.status!=200){
            Toast("订单信息错误，请重新创建订单");
        }
        this.ord=d.data.data.orderKey;
        console.log(this.ord);
        this.addcar = d.data.data.addressInfo.id;
        this.axios.post("http://47.115.51.185/api/order/computed/" + this.ord,{
              addressId: this.addcar,
              couponId: 0,
              payType: "yue",
              shipping_type: 1,
              useIntegral: 0,
        }).then(d=>{
          console.log(d);
        })
        this.axios.post("http://47.115.51.185/api/order/create/" + this.ord,{
            addressId: this.addcar,
              couponId: 0,
              payType: "yue",
              shipping_type: 1,
              useIntegral: 0,
        }).then(d=>{
          console.log(d);
              console.log( d.data.data.result.orderId);
      this.axios.get("http://47.115.51.185/api/order/detail/"+
      d.data.data.result.orderId).then(d=>{
        console.log(d);
        this.jsd=JSON.stringify(d);
        this.$router.push({
        path: "/paySuccess",
          query:{
            price: this.carallnum,
            dingdan:this.jsd
          }
        })
      })
        })
      })
    },
  addact(){
         this.$refs.wechat.classList.remove("active");
      this.$refs.doll.classList.add("active");
  },
  addact2(){
        this.$refs.doll.classList.remove("active");
      this.$refs.wechat.classList.add("active");

  }
  },
   computed: {
    ...mapGetters(["userInfo", "token"]),
  },
}
</script>


<style lang="less" scoped>
.submit-box{
  background-color: rgb(245,245,245);
}
.allAddress {
  width: 100%;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e93323),
    to(#f5f5f5)
  );
  background-image: linear-gradient(180deg, #e93323 0, #f5f5f5);
  background-image: -moz-linear-gradient(to bottom, #e93323 0, #f5f5f5 100%);
  padding-top: 1rem;
  .setaddress {
    border-radius: 5px 5px 0px 0px;

    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    // padding: 50px 0px;
    // margin-bottom: 20px;
  }
}

.shopping-box {
  padding: 1px;
  border-bottom: 1px solid #e8e8e8;
  margin-left: 15px;
  background-color: #fff;
}
.van-cell {
  padding: 0px 0px;
}
.inputbei {
  width: 100%;
  height: 50px;
  margin: 10px 0px;
  background-color: rgb(249, 249, 249);
  border: none;
  /* padding-bottom: 10px; */
  font-size: 10px;
  text-align: top;
}
.van-card {
  background-color: #fff;
}
.wechat{
padding: 10px 0px;
}
.wechat-title{
  margin-left: auto;
}

.zhifufangshi {
  padding: 20px 10px;
  background-color: #fff;
  .zhifu2 {
    div {
      margin: 2vh 10vw;
      width: 80vw;
      height: 8vh;
      border: 1px solid #eee;
      border-radius: 10px;
      display: flex;
      span {
        margin-top: 17px;
        height: 3vh;
        padding: 0px 15px;
        font-size: 14px;
      }
      span:nth-child(1) {
        display: flex;
        border-right: 1px solid #eee;
      }
    }
  }
}
.active {
  border: 1px solid red !important;
  span:nth-child(1) {
    color: red !important;
  }
}
</style>